<template>
  <el-card :bordered="false" class="goods_list_add">
    <el-page-header
      @back="$router.go(-1)"
      style="margin-bottom: 10px"
    ></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="所属业态：">
              <span style="color: red">{{
                this.$route.query.businessType | businessType
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="供应商名称：" prop="supplierMerchants">
              <el-select
                v-model="ruleForm.supplierMerchants"
                placeholder="请选择供应商名称"
                :disabled="disabled"
                multiple
                filterable
                style="width: 30%"
              >
                <el-option
                  :value="item.value"
                  v-for="(item, index) in supplierMerchantIdList"
                  :key="index"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品名称：" prop="goodsName">
              <el-input
                v-model="ruleForm.goodsName"
                placeholder="请输入商品名称，不超过30个字符"
                :disabled="disabled"
                style="width: 30%"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="8">
            <el-form-item label="商品条码：" required>
              <el-col :span="2">
                <el-form-item prop="sptm">
                  <el-select v-model="ruleForm.sptm" :disabled="disabled" @change="sptmChange">
                    <el-option :value="0" label="无"></el-option>
                    <el-option :value="1" label="有"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="17" style="padding-right:0" v-if="ruleForm.sptm == 1">
                <el-form-item prop="barCode">
                  <el-input
                    v-model="ruleForm.barCode"
                    placeholder="请输入商品条码"
                    :disabled="disabled"
                    style="width:30%"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col> -->
          <el-col :xs="8">
            <el-form-item label="商品条码：" prop="barCode">
              <el-input
                v-model="ruleForm.barCode"
                placeholder="请输入商品条码"
                :disabled="disabled"
                style="width: 30%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品类目：" prop="pid">
              <el-cascader
                :options="categoryIdList"
                :props="{ checkStrictly: true }"
                clearable
                placeholder="请选择商品类目"
                v-model="ruleForm.pid"
                @change="$forceUpdate()"
                style="width: 30%"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品图片：" required>
              <el-upload
                :headers="headers"
                :before-upload="beforeUpload"
                :on-success="handleGoodsPicUploadSuccess"
                list-type="picture-card"
                action="/admin/sys-file/upload"
                :file-list="fileList"
                :limit="6"
                :on-progress="onProgress"
                :on-exceed="onExceed"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">
                  建议上传大小不超过10M，尺寸为 200 *
                  200的图片，最多6张图，默认首图为主图
                </div>
                <div slot="file" slot-scope="{ file }">
                  <div
                    class="el-loading-mask"
                    style="background-color: rgba(0, 0, 0, 0.8)"
                    v-if="file.status === 'uploading'"
                  >
                    <div class="el-loading-spinner">
                      <i class="el-icon-loading" style="font-size: 20px"></i>
                      <p class="el-loading-text">正在上传中...</p>
                    </div>
                  </div>
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt
                  />
                  <span class="el-upload-list__item-actions" v-if="uploading">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      class="el-upload-list__item-delete"
                      @click="delUplod(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                    <span class="swzt">
                      <el-button
                        type="text"
                        icon="el-icon-set-up"
                        v-if="fileList[0] != file"
                        @click="setMaster(file)"
                        >设为主图</el-button
                      >
                      <span v-else>主图</span>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" title="查看图片">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <!-- modal -->
              <cropper-modal
                ref="cropperModal"
                :optionsData="optionsData"
                @ok="handleCropperSuccess"
              ></cropper-modal>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品描述：" prop="goodsDes">
              <el-input
                v-model="ruleForm.goodsDes"
                placeholder="请输入商品描述，300字以内"
                style="width: 30%"
                maxlength="300"
                :autosize="{ minRows: 4, maxRows: 6 }"
                type="textarea"
                :disabled="disabled"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="库存单位：" prop="stockUnit">
              <el-select
                v-model="ruleForm.stockUnit"
                placeholder="请选择库存单位"
                style="width: 30%"
              >
                <el-option
                  :value="item.label"
                  v-for="(item, index) in stockUnitList"
                  :key="index"
                  :disabled="disabled"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="库存换算：" required>
              <el-col :span="3">
                <el-form-item>
                  <el-input-number
                    v-model="danwei"
                    :min="1"
                    class="cbjandxsj"
                    controls-position="right"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item prop="convertUnit">
                  <el-select
                    v-model="ruleForm.convertUnit"
                    :disabled="disabled"
                  >
                    <el-option
                      :value="item.label"
                      v-for="(item, index) in stockUnitList"
                      :key="index"
                      :label="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="padding-right: 0; text-align: center"
                >=</el-col
              >
              <el-col :span="3" style="padding-right: 0">
                <el-form-item prop="convertUnitNum">
                  <el-input
                    v-model="ruleForm.convertUnitNum"
                    :min="1"
                    class="cbjandxsj"
                    type="number"
                    :disabled="disabled"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item prop="stockUnit">
                  <el-select v-model="ruleForm.stockUnit">
                    <el-option
                      :value="item.label"
                      v-for="(item, index) in stockUnitList"
                      :key="index"
                      :disabled="disabled"
                      :label="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 服务信息 -->
      <com-title
        :styleIng="{ margin: '10px 0px 10px 10px' }"
        :isShow="false"
        v-if="$route.query.businessType == '04'"
      >
        <span slot="title">服务信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="服务时长：" prop="serviceDuration">
              <el-select
                v-model="ruleForm.serviceDuration"
                :disabled="disabled"
                style="width: 15%"
                @change="serviceDurationChange"
              >
                <el-option
                  :value="item.value"
                  v-for="(item, index) in serviceDurationList"
                  :key="index"
                  :label="item.label"
                ></el-option>
              </el-select>
              <span style="padding-left: 5px">小时</span>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="服务时段：" prop="service">
              <el-checkbox-group
                v-model="ruleForm.service"
                @change="$forceUpdate()"
                :disabled="disabled"
              >
                <!-- <el-checkbox label="全部" value="全部"></el-checkbox> -->
                <el-checkbox
                  v-for="(i, index) in serviceTimesList"
                  :key="index"
                  :label="i.label"
                  name="type"
                  :value="i.value"
                ></el-checkbox>
              </el-checkbox-group>
              <span v-if="!ruleForm.serviceDuration">请选择服务时长</span>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>
      <!-- 销售信息         v-if="ruleForm.sptm == 1"-->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">销售信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="12" :sm="8" :md="8">
            <el-form-item label="销售价：" prop="sellingPrice">
              <el-input
                v-model="ruleForm.sellingPrice"
                type="number"
                style="width: 80%"
                :min="0"
                :disabled="disabled"
                placeholder="请输入销售价"
                class="cbjandxsj"
                @blur="toDecimalBlur('xsj')"
              ></el-input
              >元
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8">
            <el-form-item label="成本价：" prop="costPrice">
              <el-input
                v-model="ruleForm.costPrice"
                type="number"
                :min="0"
                :disabled="disabled"
                style="width: 80%"
                class="cbjandxsj"
                placeholder="请输入成本价"
                @blur="toDecimalBlur('cbj')"
              ></el-input
              >元
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8">
            <el-form-item label="促销价：">
              <el-input
                v-model="ruleForm.promotePrice"
                type="number"
                :min="0"
                :disabled="disabled"
                style="width: 80%"
                placeholder="请输入促销价"
                class="cbjandxsj"
                @blur="toDecimalBlur('cxj')"
              ></el-input
              >元
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8">
            <el-form-item label="库存数量：" prop="stockNum">
              <el-input
                v-model="ruleForm.stockNum"
                placeholder="请输入库存数量"
                type="number"
                :min="0"
                @blur="toDecimalBlur('kcsl')"
                :disabled="disabled"
                style="width: 80%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8">
            <el-form-item label="毛利：">
              <el-col>
                <!-- <el-form-item>{{ ruleForm.grossProfit }}元</el-form-item> -->
                <el-input
                  v-model="ruleForm.grossProfit"
                  type="number"
                  :min="0"
                  :disabled="true"
                  style="width: 80%"
                  class="cbjandxsj"
                ></el-input>
                元
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8">
            <el-form-item label="毛利率：">
              <el-col>
                <!-- <el-form-item>{{ ruleForm.grossProfitRate }}%</el-form-item> -->
                <el-input
                  v-model="ruleForm.grossProfitRate"
                  type="number"
                  :min="0"
                  :disabled="true"
                  style="width: 80%"
                  class="cbjandxsj"
                ></el-input>
                %
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 商品规格 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">商品规格</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="商品类型：">
              <el-select
                v-model="ruleForm.typeId"
                placeholder="请选择商品类型"
                :disabled="disabled"
                style="width: 40%"
                @change="typeIdChange"
                filterable
                clearable
              >
                <el-option
                  :value="item.value"
                  v-for="(item, index) in typeIdList"
                  :key="index"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item
              :label="item.goodsAttributeName"
              v-for="(item, index) in typeIdAttribute"
              :key="index"
              :rules="[
                {
                  required: true,
                  message: '请选择类型属性',
                  trigger: 'change',
                },
              ]"
            >
              <el-checkbox-group
                v-model="item.valueList"
                :disabled="disabled"
                @change="changeHandler"
              >
                <el-checkbox
                  v-for="(i, index1) in item.goodsAttributeValues"
                  :key="index1"
                  :label="i.label"
                  name="type"
                  :value="i.value"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 销售渠道 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">销售渠道</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="销售渠道：" prop="saleScope">
              <el-radio-group v-model="ruleForm.saleScope" :disabled="disabled">
                <el-radio label="00">全部渠道</el-radio>
                <el-radio label="01">线上</el-radio>
                <el-radio label="02">线下</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="是否门店自建商品：" prop="isshopGoods">
              <el-radio-group
                v-model="ruleForm.isshopGoods"
                :disabled="disabled"
                @change="isshopGoodsChange"
              >
                <el-radio label="00">是</el-radio>
                <el-radio label="01">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :xs="8">
            <el-form-item label="选择门店：" prop="shopId">
              <el-select
                v-model="ruleForm.shopId"
                multiple
                placeholder="请选择选择门店"
                :disabled="disabled"
                style="width: 80%"
                @change="$forceUpdate()"
                filterable
              >
                <el-option
                  :value="item.value"
                  v-for="(item, index) in mendianList"
                  :key="index"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 商品详情 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">商品详情</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="商品详情：" prop="goodsDetails">
              <QuillEditor
                :value="ruleForm.goodsDetails"
                :myQuillEditor="'myQuillEditor'"
                @editorChange="editorChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>
      <div class="content">
        <el-button
          type="primary"
          @click="submitSave('ruleForm')"
          :loading="loadingSure"
          >{{ this.$route.query.id ? "修改提交" : "提交并保存" }}</el-button
        >
        <!-- <el-button @click="save('ruleForm')">保存</el-button> -->
        <el-button @click="quxiao('ruleForm')">取消</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.goods_list_add {
  .cbjandxsj {
    width: 100%;
    .el-input__inner {
      text-align: left;
    }
  }
  .swzt {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 0 !important;
    font-size: 16px;
  }
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
  .el-upload-list__item > div {
    width: 100%;
    height: 100%;
  }
}
</style>
